import {
  Card,
  Space,
  Form,
  Select,
  Button,
  Table,
  Pagination,
  Popconfirm,
  message,
} from 'antd';
import { useSelector, useDispatch } from 'umi';

import { farmatTime } from '@/utils/index';

import { delApi } from '@/utils/api';

const CityTable = () => {
  const dataSource = useSelector((state: any) => state.city.cityTableData);
  const total = useSelector((state: any) => state.city.total);

  const dispatch = useDispatch();

  const columns = [
    {
      title: '城市ID',
      dataIndex: '_id',
    },
    {
      title: '城市名称',
      dataIndex: 'city',
    },
    {
      title: '用车模式',
      dataIndex: 'useCar',
      render(text: string) {
        return text === '1' ? '禁停区' : '停车点';
      },
    },
    {
      title: '运营模式',
      dataIndex: 'operating',
      render(text: string) {
        return text === '1' ? '加盟' : '自营';
      },
    },
    {
      title: '城市管理员',
      dataIndex: 'admin',
    },
    {
      title: '城市开通时间',
      dataIndex: 'openTime',
      render(text: string) {
        return <span>{farmatTime(+text)}</span>;
      },
    },
    {
      title: '操作',
      render(text: string, record: any) {
        return (
          <Space>
            <Button>编辑</Button>
            <Popconfirm
              title="你确定要删除吗?"
              onConfirm={() => confirm(record._id)}
              onCancel={cancel}
              okText="是"
              cancelText="不"
            >
              <Button>删除</Button>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  const confirm = async (id: string) => {
    // console.log('删除成功', id);
    const res = await delApi({ id });
    if (res.status === 0) {
      message.success('删除成功');
      dispatch({
        type: 'city/getTableDataAsync',
        payload: {},
      });
    }
  };
  const cancel = () => {
    console.log('qvxiao');
  };

  const handleChange = (size: number) => {
    dispatch({
      type: 'city/getTableDataAsync',
      payload: {
        current_page: size,
        page_size: 10,
      },
    });
  };

  const open = () => {
    dispatch({
      type: 'city/open',
    });
  };

  return (
    <Card title="城市表格">
      <Button style={{ float: 'right' }} onClick={open}>
        添加
      </Button>
      <Table dataSource={dataSource} columns={columns} pagination={false} />
      <Pagination
        defaultCurrent={1}
        total={total}
        style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 20 }}
        onChange={(size) => handleChange(size)}
      />
    </Card>
  );
};

export default CityTable;
